<template>
  <div class="headnavdiv">
    <div
      class="drawerbtdiv"
      :class="[drawerBtCss]"
      @mouseover="onDrawerOver"
      @mouseout="onDrawerNormal"
      @click="onDrawerBtClicked"
    >
      <i class="el-icon-s-fold"></i>
    </div>

    <div class="titlenavdiv">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="rightdiv">
      <div
        class="searchbtdiv"
        :class="[searchBtIconCss]"
        @mouseover="onSearchOver"
        @mouseout="onSearchNormal"
        @click="onSearchBtClicked"
      >
        <i class="el-icon-search"></i>
      </div>
      <transition name="slide-fade">
        <div class="inputdivCss" v-show="show2">
          <el-input class="searchInput" placeholder="搜索..."></el-input>
        </div>
      </transition>
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          下拉菜单
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <div
        class="morebtdiv"
        :class="[moreBtIconCss]"
        @mouseover="onMoreOver"
        @mouseout="onMoreNormal"
        @click="onMoreBtClicked"
      >
        <i class="el-icon-more"></i>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    titles: Array
  },
  data() {
    return {
      drawerBtCss: "drawerBtOver",
      drawerBtIconCss: "drawerBtOver",
      moreBtIconCss: "drawerBtOver",
      searchBtIconCss: "drawerBtOver",
      show2: true
    };
  },
  methods: {
    onDrawerOver() {
      this.drawerBtCss = "drawerBtOver";
    },
    onDrawerNormal() {
      this.drawerBtCss = "drawerBtNormal";
    },
    onDrawerBtClicked() {
      this.$emit("click");
    },

    onMoreOver() {
      this.moreBtIconCss = "drawerBtOver";
    },
    onMoreNormal() {
      this.moreBtIconCss = "drawerBtNormal";
    },
    onMoreBtClicked() {
      this.$emit("click");
    },

    onSearchOver() {
      this.searchBtIconCss = "drawerBtOver";
    },
    onSearchNormal() {
      this.searchBtIconCss = "drawerBtNormal";
    },
    onSearchBtClicked() {
      // this.$emit("click");
      this.show2 = !this.show2;
    },
    onMainPageBtPressed() {
      alert("123");
    }
  }
};
</script>

<style lang="scss" scoped>
.slide-fade-enter-active {
  transition: all 1.6s ease;
}
.slide-fade-leave-active {
  transition: all 1.6s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
  transform: translateX(10px);
  opacity: 0;
}
.headnavdiv {
  width: "100%";
  margin-top: 0px;
  padding: 0%;
  display: flex;
  align-items: left;
  position: relative;
}
.drawerbtdiv {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drawerBtOver {
  background-color: #f6f6f6;
}
.drawerBtNormal {
  background-color: #ffffff;
}
.titlenavdiv {
  text-align: center;
  display: flex;
  align-items: center;
  margin-left: 5px;
  
}
.rightdiv {
  position: absolute;
  height: 100%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .searchbtdiv {
    width: 40px;
    margin-left: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .morebtdiv {
    width: 40px;
    margin-left: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inputdivCss {
    height: 100%;
    margin-right: 10px;

    .searchInput {
      width: 280px;

      >>> .el-input__inner {
        width: 280px;
        border-top-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        border-radius: 0;
      }
    }
  }

}
</style>